import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

import NumberTool from '../libs/number-tool';
import styles from '../styles/components/wallets.module.css';

const Wallets = (props) => {
    return (
        <div>
            <Typography variant="h4">Wallets</Typography>

            <Grid className="top-10" container spacing={2}>
                {props.organization && props.organization.wallets
                    ? props.organization.wallets.map((wallet) => {
                          return (
                              <Grid item key={wallet.id} xs={2}>
                                  <Card className={styles['card']}>
                                      <Grid container key={wallet.id}>
                                          <Grid item key={wallet.id}>
                                              <Avatar
                                                  className={styles['avatar']}
                                                  alt={wallet.token}
                                                  src={wallet.icon}
                                              />
                                          </Grid>
                                          <Grid item>
                                              <Typography className={styles['balance']}>
                                                  <strong>
                                                      {NumberTool.format(wallet.balance)}
                                                  </strong>{' '}
                                                  <small>{wallet.token}</small>
                                              </Typography>
                                          </Grid>
                                      </Grid>
                                  </Card>
                              </Grid>
                          );
                      })
                    : ''}
            </Grid>
        </div>
    );
};

export default Wallets;
